<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>页面布局</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		p{
			margin: 50px;
		}
		div{
			height: 100px;
		}
		.left{
			background: red;
		}
		.center{
			background: yellow;
		}
		.right{
			background: blue;
		}
	</style>
</head>
<body>
	<style>
		.float {
			height: 100px;
		}
		.float .left, .float .right {
			width: 300px;
		}
		.float .left {
			float: left;
		}
		.float .right {
			float: right;
		}
	</style>
	<p>左中右三栏布局：高度规定，左右width：300px，中间自适应</p>
	<p>----------------------------------------------------------------1.浮动布局：脱离文档流，会影响周围布局，需要清除浮动，但是兼容性最好</p>
	<div class="float">
		<div class="left"></div>
		<div class="right"></div>
		<div class="center">浮动局部</div>
	</div>

	<style>
		.absolute {
			position: relative;
			height: 100px;
		}

		.absolute .left,
		.absolute .right {
			width: 300px;
		}

		.absolute .left {
			position: absolute;
			top: 0;
			left: 0;
		}

		.absolute .right {
			position: absolute;
			top: 0;
			right: 0;
		}
		.absolute .center {
			position: absolute;
			left: 300px;
			right: 300px;
		}
	</style>
	<p>--------------------------------------------------------------2.绝对定位：使用起来最容易，但是脱离文档流，会影响下面的元素，必须要脱离文档流</p>
	<div class="absolute">
		<div class="left"></div>
		<div class="center">绝对定位</div>
		<div class="right"></div>
	</div>

	<style>
		.flex {
			display: flex;
		}

		.flex .left,
		.flex .right {
			flex-basis: 300px;
		}
		.flex .center {
			flex: 1;
		}
	</style>
	<p>-------------------------------------------------------------------------------3.flex定位：解决上面两个布局的缺点，最好的布局方式</p>
	<div class="flex">
		<div class="left"></div>
		<div class="center">flex 布局</div>
		<div class="right"></div>
	</div>

	<style>
		.table {
			width: 100%;
			display: table;
		}
		.table div{
			display: table-cell;
		}
		.table .left,
		.table .right {
			width: 300px;
		}
	</style>
	<p>--------------------------------------------------------------4.table布局</p>
	<div class="table">
		<div class="left"></div>
		<div class="center">table 布局</div>
		<div class="right"></div>
	</div>


	<style>
		.grid {
			width: 100%;
			display: grid;
			grid-template-rows: 100px;
			grid-template-columns: 300px auto 300px;
		}

	</style>
	<p>-------------------------------------------------------------------------------------5.grid布局</p>
	<div class="grid">
		<div class="left"></div>
		<div class="center">grid 布局</div>
		<div class="right"></div>
	</div>
	
</body>
</html>